<template>
	<view class="content fofa">
		<tabnav title="模板管理" :col="back"></tabnav>
		<view class="wid100">
			<view class="wid100 bacFFF" style="height: 148rpx;">
				<view class="wid87 hei100 mar dis disAl disJuB">
					<view class="wid87 dis disAl borRad10" style="height: 71rpx;background-color: #F4F3F3;">
						<view class="dis disJuC" style="width: 20%;">
							<image src="https://www.sign.run/applet/static/wenjian/suosou.png" style="width: 31rpx;height: 31rpx;"></image>
						</view>
						<input class="wid80 " @input="suosouInput" placeholder="搜索模板名称" />
					</view>
					<image src="https://www.sign.run/applet/static/wode/shaixuan.png" style="width: 42rpx;height: 42rpx;"></image>
				</view>
			</view>
			<scroll-view :style="'height: calc(100vh - 148rpx - 120rpx - 90rpx - '+tops+'px);'" @refresherrefresh="onPulling" :refresher-triggered="triggered"
				scroll-y="true" class="scroll-Y" @scrolltolower="lower" :refresher-enabled="true">
				<view class="wid100" v-if="list.length == 0">
					<view class="wid100" style="height: 160rpx;"></view>
					<view class="wid100 textCen">
						<image src="https://www.sign.run/applet/static/wenjian/wushuju.png" style="width: 306rpx;height: 200rpx;"></image>
						<view class="mar-top30 foSi25" style="color: #858585;">暂无模板</view>
					</view>
				</view>
				<view class="wid87 mar dis disAl disJuB flwa">
					<view class="borRad20 bacFFF box1 mar-top30" @click="tiaozhuan('/pages/template/previewTemplate?id='+item.id)" v-for="(item,index) in list" :key="index"
						style="height: 250rpx;width: 48%;">
						<view class="dis disAl disJuC" style="height: 184rpx;">
							<image src="https://www.sign.run/applet/static/template/moban.png" style="width: 134rpx;height: 142rpx;"></image>
						</view>
						<view class="xia"></view>
						<view class="hei60 dis disAl wid90 mar">
							<view class="wid80 foSi20 overflowHidden">合作协议（企业与企业）</view>
						</view>
					</view>
				</view>
				<view style="height: 40rpx;"></view>
			</scroll-view>
		</view>
		<view class="wid100 dis disAl disJuC poAbs bacFFF box1" style="height: 120rpx;bottom: 0;">
			<view class="dis disAl disJuC coFFF hei80 foSi35 borRad10" @click="toggle('bottom')" 
			:style="'background-color: '+back+';'" style="width: 400rpx;">新建模板</view>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view style="height: 20rpx;"></view>
			<view class="hei80 dis disAl disJuC poRel">
				<view class="poAbs hei80 dis disAl" style="left: 40rpx;">
					<image src="https://www.sign.run/applet/static/index/guanbi.png"style="width: 30rpx;height: 30rpx;" @click="guanbi"></image>
				</view>
				<view class="foSi35 fowe600" style="">新建模板</view>
			</view>
			<view style="height: 20rpx;"></view>
			<view class="wid80 mar dis disAl mar-top20" style="justify-content: space-around;">
				<view class="dis disAl disJuC fleDir">
					<image src="https://www.sign.run/applet/static/index/weixin.png" style="width: 112rpx;height: 112rpx;"></image>
					<view class=" foSi25 mar-top20">微信文件发起</view>
				</view>
				<view class="dis disAl disJuC fleDir">
					<image src="https://www.sign.run/applet/static/index/hetongcaogao.png" style="width: 112rpx;height: 112rpx;"></image>
					<view class=" foSi25 mar-top20">合同草稿发起</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {
			return {
				back: uni.getStorageSync('back'),
				suosou: '',
				// 判断是否还在继续输入
				timer: null,
				tops: 0,
				last_page: 0,
				page: 0,
				triggered: false,
				_freshing: false,
				list: [
					{id:1},
				],
				userinfo:{}, // 这里用使用中token，主要是员工和企业账号发起
				token:'',
				search:{
					templateName:'', // 模板名称
				}
			}
		},
		onLoad() {
			console.log('')
			
		},
		created() {
			var that = this
			uni.getSystemInfo({
				success: (e) => {
					console.log(e)
					that.tops = e.statusBarHeight
				}
			})
			
		},
		methods: {
			get_templates(){
				console.log('执行啊')
				let that = this
				uni.request({
					url: that.global.url+'api/qianyu_dzq/applet_template_list',
					method: 'POST',
					header:{'site-id':that.global.site_id,'token':that.token},
					data: {
						'templateName':'234',
					},
					success(res) {
					    let result = res.data
						console.log(result);
					    if(result.code == 1){
					       that.datalist = result.data
					    }else{
					        uni.showToast({
					            title: result.msg,
					            icon:'none',
								duration: 2000
					        })
					    }
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			guanbi(){
				this.$refs.popup.close()
			},
			onPulling(e) {
				var that = this
				if (that._freshing) return;
				that._freshing = true;
				that.triggered = true
				console.log("onpulling", e);
				setTimeout(() => {
					that.triggered = false;
					that._freshing = false;
				}, 3000)
			},
			lower(e) {
				if(this.last_page != this.page+1){
					this.page++
				}
			},
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				});
			},
			suosouInput: function(event) {
				let that = this
				if (this.timer !== null) clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.search.templateName = event.target.value
					this.page = 0
					console.log(this.search.templateName)
					that.get_templates()
				}, 1000)
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background-color: #F4F3F3;
	}
	.foSi28{
		font-size: 28rpx;
	}
	.xia{
		height: 1rpx;
		background: #E5E5E5;
	}
</style>
